<template>
  <div>
    {{$store.state.list}}
    <br>
    {{$store.getters.filterList}}
    <br>
    <!-- 学校详细地址: {{$store.getters.schoolDetail}} -->
    学校详细地址: {{schoolDetail}}
  </div>
</template>

<script>
// 假设已经有过一个函数叫做 mapMutations
// 引入同名的时候会报错
const mapMutations = function() {}
console.log(mapMutations);
import {mapMutations as vuexMapMutations} from 'vuex'
import {mapState, mapActions, mapGetters} from 'vuex'


console.log(mapState(['count', 'name', 'age']));
export default {
  data() {
    return {
      name: '大明'
    }
  },
  computed: {
    // schoolDetail() {
    //   return this.$store.getters.schoolDetail
    // },
    ...mapGetters(['schoolDetail']),
    // count() {
    //   return this.$store.state.count
    // },
    // name() {
    //   return this.$store.state.name
    // },
    // age() {
    //   return this.$store.state.age
    // },
    ...mapState(['count','age']),
    // 上面这种写法最简单, 映射同名state
    // 但是如果当前组件中已经用了这个名字, 可以在映射时改名
    ...mapState({
      vuexName: 'name',
    })
  },
  methods: {
    // 手动封装
    // setCount(payload) {
    //   this.$store.commit('setCount', payload)
    // }
    // 辅助函数
    ...vuexMapMutations(['setCount']),
    // asyncSetCount(payload) {
    //   this.$store.dispatch('asyncSetCount', payload)
    // }
    ...mapActions(['asyncSetCount'])
  },
  created() {
    // 打印仓库
    console.log(this.$store);
    console.log(this.$store.state.name);
  }
}
</script>

<style>

</style>